<template>
	<view class="incomeListMain">
		<u-sticky offset-top="25">
			<view class="search">
				<input type="text" v-model="search" placeholder="可输入商户号、商户名称、机具号查询" />
				<view class="btnSearch" @click="searchTab">搜 索</view>
			</view>
		</u-sticky>
		<view class="incomeListBox">
			<!-- 列表 -->
			<view v-if="list.length > 0">
				<view class="incomelistItem" v-for="(item, index) in list" :key="index">

					<view class="topBox solid-bottom flex align-center justify-between">
						<view class="topLeft">
							<view>{{ item.number }}</view>
						</view>
					</view>
					<view class="subBox flex align-center justify-between">
						<view class="subLeft">
							<view>商户号：{{ item.mercId }}</view>
							<view>商户名称：{{ item.mercNm }}</view>
							<view>激活时间：{{ $u.timeFormat(item.active_time, "yyyy-mm-dd hh:MM:ss") }}</view>
							<view>绑定时间：{{ $u.timeFormat(item.join_time, "yyyy-mm-dd hh:MM:ss") }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 暂无数据 -->
			<view class="noMachine flex align-center" v-if="list.length == 0 && isLoad">
				<image src="../../static/images/noData/zwjl.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</view>
		<u-loadmore :status="status" @loadmore="loadmore" v-if="list.length > 0" style="padding: 40rpx 0" />
		<toast></toast>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				page: 1,
				limit: 15,
				list: [],
				dateType:'',
				searchId: '',
				search: '',

				status: "loadmore",
				noMore: false,
				isLoad: false,
			};
		},
		onLoad(options) {
			this.searchId = options.id;
			this.dateType = options.searchType;
			this.getActiveList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.status = "loadmore";
			this.noMore = false;
			this.isLoad = false;
			this.getActiveList();
		},
		onReachBottom() {
			if (this.noMore) {
				this.status = "nomore";
			} else {
				this.status = "loading";
				this.page = ++this.page;
				this.getActiveList();
			}
		},
		// 点击下载更多
		loadmore() {
			if (this.noMore) {
				this.status = "nomore";
			} else {
				this.page = ++this.page;
				this.status = "loadmore";
				this.getActiveList();
			}
		},
		methods: {
			getActiveList() {
				this.$u.api
					.getActiveList({
						user_id: this.searchId,
						page_index: this.page,
						page_size: this.limit,
						date_type:this.dateType,
						search_key: this.search
					})
					.then((res) => {
						if (res.status == 200) {
							let datas = res.result;
							if (this.page == 1 && datas.length == 0) {
								this.noMore == true;
								this.status = "nomore";
							}
							if (this.page == 1 && datas.length < this.limit) {
								this.noMore == true;
								this.status = "nomore";
							}
							if (this.page > 1 && datas.length < this.limit) {
								this.noMore == true;
								this.status = "nomore";
							}
							if (this.page > 1 && datas.length == this.limit) {
								this.status = "loading";
							}
							this.list = this.list.concat(datas);
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: "error",
								duration: 1200,
							});
						}
						this.isLoad = true;
						uni.stopPullDownRefresh();
					})
					.catch((res) => {
						if (res.errMsg == "request:fail timeout") {
							this.$u.toast("请求超时，请重试!");
						} else if (res.errMsg == "request:fail") {
							this.$u.toast("请求失败，请重试");
						} else {
							this.$u.toast("请求失败，请重试");
						}
						this.$loading(false);
						setTimeout(() => {
							this.$u.route({
								type: "navigateBack",
								delta: 1,
							});
						}, 2000);
					});
			},

			// 搜索
			searchTab() {
				this.page = 1;
				this.search = this.$u.trim(this.search, "all");
				this.list = [];
				this.status = "nomore";
				this.getActiveList();
			},

		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.incomeListMain {
		padding: 30rpx;

		.incomelistItem {
			padding: 20rpx 30rpx 28rpx;
			margin-bottom: 30rpx;
			box-shadow: 3rpx 5rpx 10rpx #dddddd;
			border-radius: 10rpx;

			.topBox {
				padding-bottom: 20rpx;

				.topLeft {
					>view {
						font-weight: bold;
						font-size: 32rpx;
					}

					>text {
						color: #999;
					}
				}
			}

			.subBox {
				padding-top: 20rpx;

				.subLeft {
					view {
						font-size: 24rpx;
						line-height: 36rpx;
					}
				}
			}
		}
	}

	.search {
		position: relative;
		border-radius: 25rpx;
		padding: 0 30rpx;
		height: 60rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 7rpx #ccc;

		input {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}
	}

	.btnSearch {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 100rpx;
		text-align: center;
		color: #777;
		line-height: 20px;
		height: 40rpx;
		z-index: 99;
		border-left: solid 1rpx #bbb;
	}
</style>
